<script setup lang="ts">
import dayjs from 'dayjs';
import { ref } from 'vue';
import AuthBar from '@/components/authBar/index.vue';
import { dictVal2Text } from '@/utils/dict.utils';

function handleSearch() {}

function handleConfirm(val: string) {
  console.log(val);
}

const appointmentStatus = ref('1');

const appointmentStatusList = ref([
  {
    label: '全部状态',
    value: '1'
  },
  {
    label: '未开始',
    value: '2'
  },
  {
    label: '已开始',
    value: '3'
  },
  {
    label: '已完成',
    value: '4'
  },
  {
    label: '已取消',
    value: '5'
  }
]);

const searchValue = ref('');

const appointmentDate = ref('');

function onClearAppointmentDate() {
  appointmentDate.value = '';
}

function handleDetail() {
  console.log('>>1');

  uni.navigateTo({
    url: '/pages/examination/appointDetail'
  });
}
</script>

<template>
  <view class="appointment flex-col">
    <AuthBar />
    <view class="flex-1 overflow-auto pb-40">
      <view class="page-title mt-63">
        我的预约
      </view>

      <view class="search mt-25 flex items-start">
        <view class="relative mr-54 flex-1 self-start">
          <wd-input v-model="searchValue" placeholder="搜索体检/检查类型，科室，地点..." clearable />
          <view class="search-btn">
            <wd-button @click="handleSearch">
              搜索
            </wd-button>
          </view>
        </view>
        <view class="relative mr-20 w-166">
          <wd-picker
            v-model="appointmentStatus"
            :columns="appointmentStatusList"
            title="选择搜索类型"
            use-default-slot
            @confirm="handleConfirm"
          >
            <wd-input :placeholder="dictVal2Text(appointmentStatus, appointmentStatusList)" readonly />
          </wd-picker>

          <view class="select-arrow">
            <wd-icon name="arrow-down" size="22px" color="var(--primary)" />
          </view>
        </view>
        <view class="relative w-220">
          <wd-datetime-picker
            v-model="appointmentDate"
            type="date"
            title="选择预约时间"
            use-default-slot
            @confirm="handleConfirm"
          >
            <wd-input :placeholder="appointmentDate ? dayjs(appointmentDate).format('YYYY-MM-DD') : '预约时间'" readonly />
          </wd-datetime-picker>

          <view v-if="appointmentDate" class="select-clear" @click.stop="onClearAppointmentDate">
            <wd-icon name="error-fill" size="22px" />
          </view>

          <view class="select-arrow">
            <wd-icon name="arrow-down" size="22px" color="var(--primary)" />
          </view>
        </view>
      </view>

      <view class="appoint-list px-48">
        <view v-for="item in 10" :key="item" class="appoint-item">
          <view class="appoint-item__hd flex items-center justify-between">
            <view class="appoint-item__title">
              常规体检套餐
            </view>
            <view class="appoint-item__status">
              进行中
            </view>
          </view>
          <view class="appoint-cell__group">
            <view class="appoint-cell">
              <view class="appoint-cell__label">
                日期:
              </view>
              <view class="appoint-cell__value">
                2023-08-01 星期三
              </view>
            </view>
            <view class="appoint-cell">
              <view class="appoint-cell__label">
                时间:
              </view>
              <view class="appoint-cell__value">
                10:00-11:00
              </view>
            </view>
            <view class="appoint-cell">
              <view class="appoint-cell__label">
                地点:
              </view>
              <view class="appoint-cell__value">
                北京市海淀区
              </view>
            </view>
            <view class="appoint-cell">
              <view class="appoint-cell__label">
                医生:
              </view>
              <view class="appoint-cell__value">
                张三
              </view>
            </view>
            <view class="appoint-cell">
              <view class="appoint-cell__label">
                预约单号:
              </view>
              <view class="appoint-cell__value">
                APT20250818001
              </view>
            </view>
          </view>
          <view class="view-detail mt-42 flex justify-end pt-30">
            <view class="detail-btn" @click="handleDetail">
              查看详情 <wd-icon name="arrow-down" size="22px" color="var(--primary)" />
            </view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<route type="page" lang="json5">
{
  layout: 'default',
  style: {
    navigationBarTitleText: '预约明细',
    navigationStyle: 'custom'
  }
}
</route>

<style lang="scss" scoped>
.appointment {
  background-color: var(--bg-color);
  height: 100%;

  .page-title {
    font-size: 60px;
    font-weight: bold;
    color: var(--text-color);
    text-align: center;
  }

  .search {
    padding: 30px 48px;
    --wot-input-inner-height: 68px;
    --wot-input-fs: 20px;
    --wot-input-placeholder-color: #767676;
    background: #d9e9ff;
    :deep(.wd-input) {
      border-radius: 8px;
      background: #eff5ff;
      border: 1px solid #ffffff;
      box-sizing: border-box;
      padding-left: 20px;

      &:after {
        background: transparent;
      }
    }

    .search-btn {
      position: absolute;
      top: 0;
      bottom: 0;
      right: 0;
      :deep(.wd-button) {
        width: 98px;
        height: 100%;
        background: var(--primary);
        color: #fff;
        border-radius: 0px 6px 6px 0px;
        font-size: 26px;
      }
    }

    .select-arrow {
      position: absolute;
      right: 24px;
      top: 50%;
      transform: translateY(-50%);
    }
    .select-clear {
      position: absolute;
      right: 50px;
      top: 50%;
      transform: translateY(-50%);
      z-index: 2;
    }
  }

  .appoint-list {
    .appoint-item {
      background: #f5f9ff;
      border-radius: 20px;
      padding: 30px 40px 35px;
      margin-top: 20px;

      .appoint-item__title {
        font-size: 48px;
        font-weight: bold;
        color: var(--text-color);
      }
      .appoint-item__status {
        background: #dfecff;
        padding: 6px 34px;
        border-radius: 100px;
        color: var(--primary);
        font-size: 32px;
      }

      .appoint-cell__group {
        @apply flex flex-wrap;
        .appoint-cell {
          @apply flex items-center;
          color: #3d3d3d;
          font-size: 34px;
          margin-top: 32px;
          width: 65%;
          .appoint-cell__label {
          }
          .appoint-cell__value {
            margin-left: 12px;
          }
          &:nth-child(2n) {
            width: 35%;
          }
        }
      }

      .view-detail {
        border-top: 1px solid #3c7ce2;
        .detail-btn {
          color: var(--primary);
          font-size: 28px;
        }
      }
    }
  }
}
</style>
